<template>
  <div>
    <DaprPlusTable
      :table-title="$t('daprplus.auth.role.list')"
      :entity="entity"
      :grid-options="gridOptions"
      :form-options="formOptions"
      :query-api="crudApi.getPage"
      :create-api="crudApi.create"
      :update-api="crudApi.update"
      :delete-api="crudApi.delete"
      :default-new-record="createDefaultRole"
      @update:grid-api="onGridApiUpdate"
    >
      <template #action="{ row }">
        <AccessControl :codes="['RoleResource:Set']" type="code">
          <Button type="link" @click="handleAuthorize(row)">
            <template #icon><KeyOutlined /></template>
            {{ $t('daprplus.auth.role.auth') }}
          </Button>
        </AccessControl>
      </template>
    </DaprPlusTable>

    <RoleAuthorizeDrawer v-model:open="roleAuthorizeOpen" :role="currentRole" />
  </div>
</template>

<script lang="ts" setup>
import type {
  ExtendedVxeGridApi,
  VxeTableGridOptions,
} from '#/adapter/vxe-table';
import type { VbenFormProps } from '#/adapter/form';
import { DaprPlusTable, RoleAuthorizeDrawer } from '#/components/daprplus';
import { createCrudApi, type RoleInDto, type RoleOutDto } from '#/api/daprplus';
import { createBooleanColumn, type EntityInfo } from '#/utils/daprplus';
import { Button } from 'ant-design-vue';
import { KeyOutlined } from '@ant-design/icons-vue';
import { ref } from 'vue';
import { $t } from '#/locales';
import { AccessControl } from '@vben/access';
const entity: EntityInfo = {
  code: 'Role',
  display: $t('daprplus.auth.role.title'),
};

const baseUrl = '/identity/api/role';
const crudApi = createCrudApi<RoleInDto, RoleOutDto>(baseUrl);

// 验证规则
const validRules = {
  name: [
    { required: true, message: '角色名不能为空' },
    { min: 2, max: 50, message: '角色名长度应在2-50个字符之间' },
  ],
  remark: [{ max: 200, message: '备注长度应在2-200个字符之间' }],
};

// 配置搜索表单
const formOptions: VbenFormProps = {
  collapsed: false,
  schema: [
    {
      component: 'Input',
      label: '角色名',
      fieldName: 'name',
    },
    {
      component: 'Input',
      label: '备注',
      fieldName: 'remark',
    },
    {
      component: 'VbenCheckbox',
      label: '管理员',
      fieldName: 'isAdmin',
    },
    {
      component: 'VbenCheckbox',
      label: '默认角色',
      fieldName: 'isDefault',
    },
    {
      component: 'VbenCheckbox',
      label: '已锁定',
      fieldName: 'isLocked',
    },
  ],
  showCollapseButton: true,
  submitOnChange: true,
};

// 表格配置
const gridOptions: VxeTableGridOptions<RoleOutDto> = {
  editRules: validRules,
  columns: [
    { type: 'checkbox', width: 40 },
    {
      field: 'id',
      title: '编号',
      sortable: true,
      width: 130,
    },
    {
      field: 'name',
      title: '角色名',
      sortable: true,
      align: 'left',
      minWidth: 150,
      editRender: { name: 'input' },
    },
    {
      field: 'remark',
      title: '备注说明',
      align: 'left',
      minWidth: 300,
      editRender: { name: 'input' },
    },
    createBooleanColumn('isAdmin', '管理员'),
    createBooleanColumn('isDefault', '默认角色'),
    createBooleanColumn('isLocked', '已锁定'),
    {
      field: 'createdTime',
      title: '创建时间',
      formatter: 'formatDateTime',
      width: 150,
    },
    {
      field: 'operate',
      title: '操作',
      width: 120,
      slots: { default: 'action' },
      fixed: 'right',
    },
  ],
};

let gridApi: ExtendedVxeGridApi;

function onGridApiUpdate(api: ExtendedVxeGridApi) {
  gridApi = api;
}

function createDefaultRole(): RoleInDto {
  return {
    id: '0',
    name: '新角色',
    remark: '',
    isAdmin: false,
    isDefault: false,
    isLocked: false,
  };
}

// 授权相关
const roleAuthorizeOpen = ref(false);
const currentRole = ref<RoleOutDto | null>(null);

// 处理授权按钮点击
async function handleAuthorize(row: RoleOutDto) {
  currentRole.value = row;
  roleAuthorizeOpen.value = true;
}
</script>

<style scoped></style>
